import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Button, Spin, Form, Input,Table,  DatePicker, Modal, message } from 'antd'
import moment from 'moment';
/* 引用接口文档路径 */
import {
  commentSelect,commentDelete,commentShowOrHide
} from 'actions/communityManage'
import '../../style/userControl.less'

const { MonthPicker, RangePicker } = DatePicker;
const FormItem = Form.Item
@Form.create({})
//abc
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",//基础数据列表
      userList:"",
      publishTime:""
    }
    this.keyword={"userName":"","content":"","publishTime":"",};//搜索关键词
    this.currentNumber = 1;//当前页面
    this.pagesize = 10;//每页条数
  }
  componentDidMount() {
    this.selectList();
  }
  
  selectFn(){//点击搜索按钮
    this.keyword = {
      "content":this.props.form.getFieldValue('content'),
      "userName":this.props.form.getFieldValue('userName'),
      "publishTime":this.state.publishTime,
    };
    this.currentNumber=1;
    this.selectList();
  }
  selectList(pageNumber){//查询列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword);
    this.currentNumber = pageNumber||1;
    this.props.dispatch(commentSelect(
      datajson,
      (respose) => {
        this.setState({
          list: respose,
        })
    }))
  }
  

  submitTimeFn(value){//发布时间
    if(value){
      value = value._d.format("yyyy-MM-dd hh:mm:ss") 
    }else{
      value = ""
    }
    this.state.publishTime = value 
  }

  commentHideFn(id,type){//评论
    Modal.confirm({
      content:"确定要执行操作吗？",
      onOk:()=>{
        this.props.dispatch(commentShowOrHide(
          {"id":id,"status":type},
          (respose) => {
            message.success(respose.respMsg)
            this.selectList(this.currentNumber);
        }))
      },
      onCancel:()=>{
      }
    })
  }
  commentDeleteFn(id){
    Modal.confirm({
      content:"确定要删除这条信息么？",
      onOk:()=>{
        this.props.dispatch(commentDelete(
          {"id":id},
          (respose) => {
            var length = this.state.list.respData.count ? this.state.list.respData.count : 0;
            if(Math.ceil(length/this.pagesize) == this.currentNumber && length%this.pagesize == 1 && this.currentNumber != 1){
              this.currentNumber = this.currentNumber - 1;
            }
            message.success(respose.respMsg)
            this.selectList(this.currentNumber);
        }))
      },
      onCancel:()=>{
      }
    })
  }

 


  columns() {//表格标题
    return [
      {
        title: '编号',
        key: 'code',
        dataIndex: 'code',
        width: '10%',
      },
      {
        title: '来源',
        dataIndex: 'typeName',
        key: 'typeName',
        width: '10%',       
      },
      {
        title: '评论内容',
        dataIndex: 'content',
        key: 'content',
        width: '10%',
        
      },
      {
        title: '评论时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: '10%',
      },
      {
        title: '评论人',
        dataIndex: 'userName',
        key: 'userName',
        width: '10%',
      },
      {
        title: '评论状态',
        dataIndex: 'status',
        key: 'status',
        width: '10%',
        render: (text, recordId, index) => <span>{text == 0? '已通过' : '已隐藏'}</span>,
      },
      {
        title: '操作',
        width: '10%',
        render: (text, recordId, index) => 
        <div>
          {
            text.status == 1 ? 
            <Button type="primary" size="small" onClick={this.commentHideFn.bind(this,text.id,0)} style={{marginRight:"5px",marginBottom:"5px"}}>显示</Button>          
            :<Button type="primary" size="small" onClick={this.commentHideFn.bind(this,text.id,1)} style={{marginRight:"5px",marginBottom:"5px"}}>隐藏</Button>          
          }
          <Button type="primary" size="small" onClick={this.commentDeleteFn.bind(this,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>删除</Button>          
        </div>,
        
      },
    ]
  }
  


  render () {
    const {form } = this.props
    const { getFieldDecorator } = form    
    const accountList = this.state.list.respData ? this.state.list.respData : [];//刷新页面调用接口数据赋值
    const joinList = this.state.userList.respData ? this.state.userList.respData.ddrList[0] :[];
    const dateFormat = 'YYYY/MM/DD';
    return (
      <div className="page">
        {/* 搜索条件筛选块 */}
        <div className="searcDiv">
          <Form onSubmit={this.selectFn.bind(this)} layout="inline">
            <FormItem label="评论内容">      
              {
                getFieldDecorator('content', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }             
            </FormItem>
            <FormItem label="评论时间">
              <DatePicker onChange={this.submitTimeFn.bind(this)} format={dateFormat} />
            </FormItem>
            <FormItem label="评论人">
              {
                getFieldDecorator('userName', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              } 
            </FormItem>

            <Button type="primary" onClick={this.selectFn.bind(this)}>搜索</Button>
          </Form>
        </div>
        {/*数据渲染列表*/}
        <Spin spinning={false}>
          <Table
            rowKey="id" 
            columns={this.columns()}//表格标题列
            dataSource={accountList.commentList}
            pagination={{ total: accountList.count, current:this.currentNumber,pageSize: this.pagesize, onChange: this.selectList.bind(this)}}
            scroll={{ y: true }}
            rowClassName={
              (record, index) => (()=>{
                var createTime = new Date(record.createTime.replace(/-/g, "/"));
                var nowTime = new Date()
                var ms = nowTime.getTime() - createTime.getTime()
                var dayDiff = Math.floor(ms / (24 * 3600 * 1000));//计算出相差天数
                var hours = Math.floor(ms % (24*3600*1000)/(3600*1000))//计算天数后剩余的毫秒数-然后算出小时数
                if((dayDiff*24 + hours) <= 6){
                  return "tableRed"
                }else{
                  return ""
                }
              })()
            } 
          />
        </Spin>
      </div>
    )
  }
}
